<template>
	<view class="content">
		<view class="home-top">
			<view class="user-info">
				<image class="head" src="../../static/logo.png"></image>
				<view class="name">Hi~ </view>
				<view class="change-user-type" @click="showUserInfo()">
					<view >实名认证</view>
					<image src="https://caipiaoimg.oss-cn-hangzhou.aliyuncs.com/mini/img/index/icon_change.png"></image>
				</view>
			</view>
			<view class="order-content">
				<view class="shop-title">线上订单</view>
				<view class="line"></view>
				<view class="order-btn-layout">
					<view class="btn-item" @click="goOrder(0)">
						<image src="http://file.quantifynet.com/image/icon_non_payment.png"></image>
						<view class="label">未支付</view>
					</view>
					<view class="btn-item" @click="goOrder(1)">
						<image src="http://file.quantifynet.com/image/icon_have_pay.png"></image>
						<view class="label">已支付</view>
					</view>
					<view class="btn-item" @click="goOrder(2)">
						<image src="http://file.quantifynet.com/image/icon_shipped.png"></image>
						<view class="label">已发货</view>
					</view>
					<view class="btn-item" @click="goOrder(3)">
						<image src="http://file.quantifynet.com/image/icon_consolidated_shipment.png"></image>
						<view class="label">售后</view>
					</view>
				</view>
			</view>
			
			<view class="action-view">
				
				<view class="action-item" @click="address()">
					<image src="http://file.quantifynet.com/image/icon_head_of_attention.png"></image>
					<view class="label">收货地址</view>
				</view>
				<view class="line"></view>
				<view class="action-item" @click="contact()">
					<image src="http://file.quantifynet.com/image/icon_delivery_address.png"></image>
					<view class="label">联系我们</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			showUserInfo(){
				
			},
			address(){
				uni.navigateTo({
					url:'/pages-client/member/addressList?type=1'
				})
			},
			contact(){
				uni.navigateTo({
					url:'/pages/mine/contact'
				})
			},
			goOrder(type){
				uni.navigateTo({
					url:'/pages/mine/order/index?type='+type
				})
			}
		}
	}
</script>

<style lang="less">
	page{
		background-color: #f7f7f7;
	}
	.content {
		display: flex;
		flex-direction: column;
	}
	.home-top{
		display: flex;
		flex-direction: column;
		background-size: 100% 500rpx;
		background-image: url("https://caipiaoimg.oss-cn-hangzhou.aliyuncs.com/mini/img/index/bg_home_top.png");
		background-repeat: no-repeat;
		width: 100%;
		height: 500rpx;
		.user-info{
			position: relative;
			margin-top: 100rpx;
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			align-items: center;
			margin-left: 30rpx;
			.head{
				width: 76rpx;
				height: 76rpx;
				border-radius: 76rpx;
				border: 4px solid #FFFFFF;
			}
			.name{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #FFFFFF;
				margin-left: 24rpx;
				font-style: normal;
			}
			.change-user-type{
				width: 158rpx;
				height: 52rpx;
				background: #FFFFFF;
				box-shadow: 0px 6rpx 24rpx 0px rgba(0,0,0,0.1);
				border-radius: 28rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				align-items: center;
				position: absolute;
				right: 80rpx;
				top: 12rpx;
				view{
					font-family: PingFang-SC, PingFang-SC;
					font-weight: 500;
					font-size: 24rpx;
					color: #333333;
				}
				image{
					width: 22rpx;
					height: 22rpx;
					margin-left: 8rpx;
				}
			}
		}
		.order-content{
			margin-top: 30rpx;
			margin-left: 30rpx;
			width: 690rpx;
			height: 287rpx;
			background: rgba(255,255,255,0.7);
			border-radius: 20rpx;
			border: 1px solid #FFFFFF;
			backdrop-filter: blur(21rpx);
			.shop-title{
				
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 30rpx;
				color: #333333;
				margin-top: 24rpx;
				margin-left: 30rpx;
			}
			.line{
				margin-left: 30rpx;
				margin-top: 16rpx;
				width: 629rpx;
				height: 2rpx;
				border: 2rpx solid #FFFFFF;
			}
			.order-btn-layout{
				display: flex;
				flex-direction: row;
				justify-content: space-between;
				align-items: center;
				margin-left: 65rpx;
				margin-right: 65rpx;
				height: 200rpx;
				.btn-item{
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					image{
						width: 88rpx;
						height: 88rpx;
					}
					.label{
						font-family: PingFang-SC, PingFang-SC;
						font-weight: 500;
						font-size: 24rpx;
						color: #333333;
						margin-top: 10rpx;
					}
				}
			}
		}
		.action-view{
			width: 690rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			margin-left: 30rpx;
			margin-top: 20rpx;
			.action-item{
				display: flex;
				flex-direction: row;
				align-items: center;
				height: 120rpx;
				width: 100%;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: 500;
				font-size: 24rpx;
				color: #333333;
				image{
					width: 64rpx;
					height: 64rpx;
					margin-left: 30rpx;
				}
				.label{
					margin-left: 20rpx;
				}
			}
			.line{
				margin-left: 30rpx;
				width: 629rpx;
				height: 1rpx;
				background-color: #EFEFEF;
			}
		}
	}
</style>
